<template>
  <div class="education-background">
    <h4>教育背景</h4>
    <el-form :model="educationForm" label-width="180px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="学校名称" style="margin-bottom: 15px;">
            <el-input v-model="educationForm.school" placeholder="请输入学校名称" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="所学专业" style="margin-bottom: 15px;">
            <el-input v-model="educationForm.major" placeholder="请输入所学专业" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="学历" style="margin-bottom: 15px;">
            <el-select v-model="educationForm.education" placeholder="请选择学历" style="width: 100%;">
              <el-option label="专科" value="专科"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="就读时间" style="margin-bottom: 15px;">
            <el-date-picker
              v-model="educationForm.studyTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="经历详述" style="margin-bottom: 15px;">
            <el-input
              type="textarea"
              v-model="educationForm.remarks"
              placeholder="请输入备注信息（限制输入五百字以内）"
              autosize="{ minRows: 3, maxRows: 6 }"
              style="width: 100%;"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { ElSelect, ElOption, ElInput, ElFormItem, ElForm, ElDatePicker, ElRow, ElCol } from 'element-plus';

export default {
  components: {
    ElSelect,
    ElOption,
    ElInput,
    ElFormItem,
    ElForm,
    ElDatePicker,
    ElRow,
    ElCol
  },
  data() {
    return {
      educationForm: {
        school: '',
        major: '',
        studyTime: [],
        education: '',
        remarks: ''
      }
    };
  }
};
</script>

<style scoped>
.education-background {
  margin-bottom: 20px;
}
</style>
